<template>
  <div>
    <div>
      <p>说明：“/"的个数表示层级数，最多支持4级</p>
    </div>
    <br />
    <el-row :gutter="0">
      <el-input type="textarea" :rows="10" v-model="value"/>
    </el-row>
    <br />
    <div style="font-size: 12px;color: #979797;">
      示例：
      <div>
        选项1 <br/>
        选项1/选项1-1 <br/>
        选项1/选项1-1/选项1-1-1
      </div>
    </div>
  </div>
</template>
<script>
import { getTreeNodeId, saveTreeNodeId } from "../../utils/db";
import { S4, simpleUnique } from "@/utils";

const id = getTreeNodeId();

export default {
  name: "BatchTreeNodeDialog",
  components: {},
  inheritAttrs: false,
  props: ["treeData"],
  data() {
    return {
      id,
      value: "",
    };
  },
  watch: {
    id(val) {
      saveTreeNodeId(val);
    },
  },
  created() {
    this.getDefaultValue();
  },
  methods: {
    getKeys(arr, value) {
      const length = value.length
      const a = arr.findIndex(e => e.label === value[0])
      const b = a > -1 && arr[a].children ? arr[a].children.findIndex(e => e.label === value[1]) : -1
      const c = b > -1 && arr[a].children[b].children ? arr[a].children[b].children.findIndex(e => e.label === value[2]) : -1

      if (length === 2) {
        return [a]
      }
      if (length === 3) {
        return [a, b]
      }
      if (length === 4) {
        return [a, b, c]
      }
      return []
    },
    handelConfirm() {
      const options = [];
      const arr = simpleUnique(this.value.split(/[(\r\n)]+/));

      for(let i = 0; i < arr.length; i++) {
        const item = arr[i]
        const optionsArr = item.split("/");

        const isNull = optionsArr.filter(e => {
          return e === '' || e === null
        })

        if (isNull.length) {
          continue
        }

        const obj = {
          id: this.id++,
          value: S4(),
          label: optionsArr[optionsArr.length - 1],
          level: 0
        };

        const keys = this.getKeys(options, optionsArr)

        const isE = keys.filter(e => {
          return e === -1
        })

        if (isE.length) {
          continue
        }

        switch (optionsArr.length) {
          case 1:
            options.push(obj)
            break
          case 2:
            if (!Object.prototype.hasOwnProperty.call(options[keys[0]], 'children')) {
              options[keys[0]].children = []
            }
            options[keys[0]].children.push(obj)
            break
          case 3:
            if (!Object.prototype.hasOwnProperty.call(options[keys[0]].children[keys[1]], 'children')) {
              options[keys[0]].children[keys[1]].children = []
            }
            options[keys[0]].children[keys[1]].children.push(obj)
            break
          case 4:
            if (!Object.prototype.hasOwnProperty.call(options[keys[0]].children[keys[1]].children[keys[2]], 'children')) {
              options[keys[0]].children[keys[1]].children[keys[2]].children = []
            }
            options[keys[0]].children[keys[1]].children[keys[2]].children.push(obj)
            break
          default:
        }
      }

      this.$emit("close", options);
    },
    getDefaultValue() {
      const arr = [];

      const handelData = (item) => {
        arr.push(item);

        if (item.children) {
          item.children.forEach((cItem) => {
            handelData(cItem);
          });
        }
      };

      this.treeData.forEach((item) => {
        handelData(item);
      });

      const getItem = (level, id) => {
        return arr.find((e) => {
          return e.level === level && e.id === id;
        });
      };

      const labelArr = [];

      arr.forEach((item) => {
        const { level, parentId, label } = item;

        const b = parentId > 0 ? getItem(level - 1, parentId) : "";
        const c = b ? getItem(b.level - 1, b.parentId) : "";
        const d = c ? getItem(c.level - 1, c.parentId) : "";

        switch (item.level) {
          case 2:
            labelArr.push(`${b.label}/${label}`);
            break;
          case 3:
            labelArr.push(`${c.label}/${b.label}/${label}`);
            break;
          case 4:
            labelArr.push(`${d.label}/${c.label}/${b.label}/${label}`);
            break;
          default:
            labelArr.push(label);
        }
      });

      this.value = labelArr.join("\r\n");
    },
  },
};
</script>
